<template>
  <div class="dashboard-editor-container">
    <div>
      <el-card class="box-card">
<!--        <el-button @click="getData" round>-->
<!--          <i class="wshub wshub-shuaxin1"></i>-->
<!--          刷新数据-->
<!--        </el-button>-->
        <el-divider direction="vertical"></el-divider>
        <span style="font-size:16px;padding-top:20px;display:inline-block;">{{date | formatDate}}</span>
      </el-card>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import {systeminfo,resetScanTimeout,ssrDetail} from '@/api/common'
import echarts from 'echarts'
import { checkPermissionV2 } from '@/utils/permission'
var padDate = function(value){
  return value < 10 ? '0' + value :value;
}
export default {
  name: 'DashboardEditor',
  components: { PanThumb,CountTo },
  data() {
    return {
      date: new Date(),
      timer:null,
      sysinfo:{
        dialogVisible:false,
        online_instance:0,
        proxy_num:0,
        surplus_msg:0,
        need_instance:0,
        countryList:[],
        countryInstance:[],
        protocol_num:0,
        scan_timeout:0,
        kill:{
          keys:[],
          nums:[]
        },
        ssr:{
          keys:[],
          get_nums:[],
          fail_nums:[]
        },
        hour_send:[]
      },
      ssrDetailDialogVisible:false,
      ssrDetailTable:[]
    }
  },
  filters: {
    formatDate: function (value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padDate(date.getMonth() + 1);
      var day = padDate(date.getDate());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds());
      return year + '-' + month + '-' + day + '  ' + hours + ':' + minutes + ':' + seconds;
    }
  },
  mounted: function () {
    // var _this = this; // 指向this 变量作用域一致;
    // this.timer = setInterval(function() {
    //   _this.date = new Date(); // 修改date
    // },1000);
    // var that = this;
    // document.addEventListener('visibilitychange', that.is_Visible)
  },
  beforeDestroy: function() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  created() {
    // systeminfo().then(res => {
    //   if(res.code == 0){
    //       this.sysinfo = res.data;
    //       this.initChart();
    //       this.initKillChart();
    //       this.initSSRChart();
    //       this.initHourChart();
    //   }else{
    //     this.$message.error('获取系统信息失败');
    //   }
    // });
  },
  methods:{
    checkPermissionV2,
    initChart(){
      this.$nextTick(function(){
        var source = this.sysinfo.countryList;
        var source2 = this.sysinfo.countryInstance;
        if(source.length>0){
          var chartDom = document.getElementById('countrySort');
          var myChart = echarts.init(chartDom);
          var option = {
            color:['#3399FF','#33CCCC', '#33CC99', '#6666FF', '#6699CC','#990000', '#996600', '#99CCCC','#CC9933','#FF6633', '#FFCCFF'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '待发数量',
                type: 'pie',
                radius: '50%',
                data: source,
                labelLine: {
                  show: false
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart.setOption(option);
        }
        if(source2.length > 0){
          var chartDom2 = document.getElementById('countryInstance');
          var myChart2 = echarts.init(chartDom2);
          var option2 = {
            color:['#3399FF','#33CCCC', '#33CC99', '#6666FF', '#6699CC','#990000', '#996600', '#99CCCC','#CC9933','#FF6633', '#FFCCFF'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            label: {
              show: false,
              position: 'center'
            },
            series: [
              {
                name: '激活的实例',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                startAngle: 180,
                data: source2,
                labelLine: {
                  show: false
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart2.setOption(option2);
        }
      });
    },
    initKillChart(){
      this.$nextTick(function(){
        if(this.sysinfo.kill.keys.length > 0){
          var chartDom = document.getElementById('killChart');
          var myChart3 = echarts.init(chartDom);
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '0%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              name: '事件',
              type: 'category',
              data: this.sysinfo.kill.keys
            },
            yAxis: {
              type: 'value',
              show:false,
            },
            series: [
              {
                name: '次数',
                data: this.sysinfo.kill.nums,
                type: 'bar',
                itemStyle:{
                  color:'#5470c6'
                },
                label: {
                  show: true,
                  position: 'inside',
                  color:'white'
                }
              }
            ]
          };
          myChart3.setOption(option);
        }
      });
    },
    initSSRChart(){
      this.$nextTick(function(){
        if(this.sysinfo.ssr.keys.length > 0){
          var chartDom = document.getElementById('ssrChart');
          var myChart4 = echarts.init(chartDom);
          var option = {
            color:['#66CC66','#FF3300'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            xAxis: {
              type: 'category',
              data: this.sysinfo.ssr.keys,
            },
            series: [
              {
                name: '使用次数',
                type: 'bar',
                data: this.sysinfo.ssr.get_nums,
                label: {
                  show: true,
                  position: 'inside',
                  color:'white'
                }
              },
              {
                name: '失败次数',
                type: 'bar',
                data: this.sysinfo.ssr.fail_nums,
                label: {
                  show: true,
                  position: 'inside',
                  color:'white'
                }
              }
            ]
          };
          myChart4.setOption(option);
        }
      });
    },
    initHourChart(){
      this.$nextTick(function(){
        if(this.sysinfo.hour_send.hours.length > 0){
          var chartDom = document.getElementById('HourChart');
          var myChart5 = echarts.init(chartDom);
          var option = {
            color:['#6600CC','#33CCCC', '#33CC99', '#6666FF', '#6699CC','#990000', '#996600', '#99CCCC','#CC9933','#FF6633', '#FFCCFF'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['Email']
            },
            grid: {
              left: '0%',
              right: '0%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: this.sysinfo.hour_send.hours
            },
            yAxis: {
              type: 'value',
              show: false,
              axisLine:{
                show:false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              }
            },
            series: [
              {
                name: '发送量',
                data: this.sysinfo.hour_send.nums,
                type: 'line',
                smooth: true,
                itemStyle : {
                  normal: {
                    textStyle: { color: '#fff' },
                    label : {show: true}
                  }
                },
                lineStyle: {
                  normal: {
                    color: '#0066CC',
                  }
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#33CCCC',
                      },
                      {
                        offset: 1,
                        color: '#3399FF',
                      },
                    ],
                    global: false,
                  },
                }
              }
            ]
          };
          myChart5.setOption(option);
        }
      });
    },
    getData(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      systeminfo().then(res => {
        loading.close();
        if(res.code == 0){
          this.sysinfo = res.data;
          this.initChart();
          this.initKillChart();
          this.initSSRChart();
          this.initHourChart();
        }else{
          this.$message.error('获取系统信息失败');
        }
      }).catch(e =>{
        loading.close();
        this.$message.error('请求发起失败');
      });
    },
    is_Visible: function (e) {
      if (e.target.visibilityState === "visible") {
        systeminfo().then(res => {
          if(res.code == 0){
            this.sysinfo = res.data;
          }else{
            this.$message.error('获取系统信息失败');
          }
        });
      } else if (e.target.visibilityState === "hidden") {
        //离开
      }
    },
    resetTimeout(){
      resetScanTimeout({}).then(res => {
        if(res.code == 0){
          this.$notify.success({title:'重置成功',message:'扫码超时号已重置'});
        }else{
          this.$notify.error({title:'重置失败',message:'不存在超时号或重置失败'});
        }
        this.getData();
      });
    },
    getSsrDetailData(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      ssrDetail().then(res => {
        loading.close();
        if(res.code == 0){
          this.ssrDetailDialogVisible = true;
          this.ssrDetailTable = res.data;
        }else{
          this.$message.error('获取SSR详情失败');
        }
      }).catch(e =>{
        loading.close();
        this.$message.error('请求发起失败');
      });
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 40px 50px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }
    .info-container {
      position: relative;
      margin-left: 190px;
      height: 150px;
      line-height: 200px;
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }
    }
  }
</style>

<style scoped>
.card-panel-col{
  padding: 10px;
}
</style>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: auto;
    min-height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    //display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
